<template>
	<div class="application-record-container">
		<h1 style="font-size: 24px;">准入申请记录</h1>
		<!-- 查询条件框 -->
		<el-card class="filter-card">
			<el-form
				:model="filterParams"
				label-width="85px"
				label-position="left"
			>
				<el-row :gutter="20">
					<el-col :span="8">
						<el-form-item label="申请状态">
							<el-select
								v-model="filterParams.status"
								placeholder="申请状态"
							>
								<el-option
									v-for="status in statusOptions"
									:key="status.value"
									:label="status.label"
									:value="status.value"
								>
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="申请时间">
							<el-date-picker
								v-model="filterParams.dateRange"
								type="daterange"
								style="width: 150%;"
								range-separator="至"
								start-placeholder="开始日期"
								end-placeholder="结束日期"
							>
							</el-date-picker>
						</el-form-item>
					</el-col>
					<el-col :span="8" class="filter-buttons">
						<el-button @click="handleReset">重置</el-button>
						<el-button
							type="primary"
							@click="handleSearch"
							style="background-color: var(--color-base); border-color: var(--color-base)"
						>
							查询
						</el-button>
					</el-col>
				</el-row>
			</el-form>
		</el-card>

		<!-- 申请记录表格 -->
		<el-card>
			<el-table :data="applications" style="width: 100%" empty-text=" ">
				<el-table-column
					type="index"
					label="序号"
					width="60"
				></el-table-column>
				<el-table-column
					prop="applicationId"
					label="申请流水号"
					width="180"
				></el-table-column>
				<el-table-column
					prop="companyName"
					label="公司名称"
					width="180"
				></el-table-column>
				<el-table-column
					prop="creditCode"
					label="统一社会信用代码"
					width="200"
				></el-table-column>
				<el-table-column
					prop="result"
					label="申请结果"
				></el-table-column>
				<el-table-column
					prop="applyDate"
					label="申请日期"
					width="160"
				></el-table-column>
				<el-table-column label="操作" fixed="right" width="100">
					<template slot-scope="scope">
						<el-button
							type="text"
              class="el-button--text"
							@click="handleView(scope.row)"
							>查看</el-button
						>
					</template>
				</el-table-column>
				<template #empty>
					<!-- 无数据时的提示 -->
					<div
						style="text-align: center; margin-top: 20px; color: #999;"
					>
						<img
							src="https://img.yzcdn.cn/vant/empty-image-default.png"
							alt="No Data"
							style="width: 100px; height: 100px;"
						/>
						<p style="height: 20px;margin: 0;">暂无申请记录</p>
						<el-link
              style="color: var(--color-base);height: 20px;"
							@click="handleAddApplication"
							>前往准入申请</el-link
						>
					</div>
				</template>
			</el-table>
       <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalInquiries">
      </el-pagination>
		</el-card>
	</div>
</template>

<script>
export default {
	data() {
		return {
      currentPage: 1,
      pageSize: 10,
      totalInquiries: 10,
			// 筛选参数
			filterParams: {
				dateRange: [],
				status: '',
			},

			// 申请状态选项
			statusOptions: [
				{ value: 'all', label: '全部状态' },
				{ value: 'pending', label: '待处理' },
				{ value: 'approved', label: '已批准' },
				{ value: 'rejected', label: '已拒绝' },
			],

			// 申请记录数据（模拟数据）
			applications: [
				{
					applicationId: 'APP001',
					id: 1,
					companyName: '公司A',
					creditCode: '123456789012345678',
					result: '待处理',
					applyDate: '2023-10-01 10:00',
				},
				{
					applicationId: 'APP002',
					id: 2,
					companyName: '公司B',
					creditCode: '876543210987654321',
					result: '已批准',
					applyDate: '2023-10-02 11:30',
				},
				{
					applicationId: 'APP003',
          id: 3,
					companyName: '公司C',
					creditCode: '135792468013579246',
					result: '已拒绝',
					applyDate: '2023-10-03 14:15',
				},
			],
		};
	},

	methods: {
		// 搜索查询
		handleSearch() {
			this.$message({
				message: '执行查询操作，功能待完善',
				type: 'info',
			});
		},

		// 重置筛选
		handleReset() {
			this.filterParams = {
				dateRange: [],
				status: '',
			};
			this.$message({
				message: '已重置筛选条件',
				type: 'success',
			});
		},

		// 查看申请详情
		handleView(row) {
      let appId = row ? row.id : null;
      const newPageUrl = "/home/ApplicationForm?type=detail&id=" + appId;
      window.open(newPageUrl, '_blank');
		},

		// 前往准入申请
		handleAddApplication() {
			const newPageUrl = "/home/ApplicationForm";
      window.open(newPageUrl, '_blank');
		},
    
    handleSizeChange(newSize) {
      this.pageSize = newSize
      // 这里预留数据请求接口
    },
    handleCurrentChange(newPage) {
      this.currentPage = newPage
      // 这里预留数据请求接口
    }
	},
};
</script>

<style scoped>
.filter-card {
	margin-bottom: 20px;
}

.filter-buttons {
	text-align: right;
	padding-right: 10px;
}

.el-pagination {
	margin-top: 20px;
	text-align: right;
}
</style>
